<template>
	<view class="wrapper">
		<!-- BOTTOM TREE IMG -->
		<view class="header"></view>
		<text class="welcome">Welcome</text>
		<text class="please-login">请登录</text>
		<view class="inputs">
			<input type="text" v-model="loginForm.username" maxlength="35" :placeholder="accountPlaceholder" />
		</view>
		<view class="inputs">
			<input type="text" v-model="loginForm.password" maxlength="35" :password="true"
				:placeholder="passwordPlaceholder" />
		</view>
		<button class="button_login" @click="switchTabToTask">登录</button>
		<view class="wx-login">
			<text class="wx-login-text" @click="navigateBack">微信登录</text>
		</view>
	</view>
</template>

<script>
	import tabBar from '@/utils/tabbar.js'
	import {
		login,
		loadUserInfo
	} from '@/network/login.js';
	export default {
		data() {
			return {
				roleId: "",
				logs: [],
				accountPlaceholder: '请输入您的账号',
				passwordPlaceholder: '请输入您的密码',
				loginForm: {
					username: '',
					password: ''
				},
			}
		},
		methods: {
			switchTabToTask() {
				if (this.loginForm.username !== '' && this.loginForm.password !== '') {
					login(this.loginForm).then(res => {
						const code = res.data.code;
						if (code === 200) {
							uni.showToast({
								title: '登录成功'
							})
							uni.setStorageSync("token", res.data.data.token);
							this.loadUserInfoData()
							// wx.switchTab({
							// 	url: '/pages/trafficBriefing/trafficBriefing'
							// })
						} else {
							uni.showToast({
								title: res.data.message
							})
						}
					}).catch(err => {
						// console.log(err)
					})
				} else {
					this.$common.errorToShow("请录入登录信息...");
				}
			},
			navigateBack() {
				uni.navigateBack()
			},
			loadUserInfoData() {
				loadUserInfo().then(res => {
					const code = res.data.code;
					if (code === 200) {
						uni.setStorageSync("organId", res.data.data.organId);
						if (res.data.data.authority === "1") {
							this.$store.dispatch('changeTabbar', tabBar.tab1)
							wx.switchTab({
								url: '/pages/trafficBriefing/trafficBriefing'
							})
						} else {
							this.$store.dispatch('changeTabbar', tabBar.tab2)
							wx.switchTab({
								url: '/pages/trafficBriefing/trafficBriefing'
							})
						}
					} else {
						uni.showToast({
							title: res.data.message
						})
					}
				})
			}
		}
	}
</script>

<style>
	page {
		height: 100vh;
		display: flex;
		flex-direction: column;
	}

	.scrollarea {
		flex: 1;
		overflow-y: hidden;
	}

	.log-item {
		margin-top: 20rpx;
		text-align: center;
	}

	.log-item:last-child {
		padding-bottom: env(safe-area-inset-bottom);
	}

	uni-page-body {
		height: 100%;
	}

	.wrapper {
		width: 100%;
		height: 100vh;
		overflow: hidden;
		background-color: #fafafc;
	}

	.wrapper .login-logo {
		height: 140rpx;
		width: 140rpx;
	}

	.content {
		position: relative;
		top: 0;
		left: 0;
		/* background-image: url(../../static/bg-top.svg); */
		background-position: 40% 50%;
		width: 100%;
		height: 0;
		padding-bottom: 205%;
		background-repeat: no-repeat;
		background-size: 175% 175%;
	}

	.header {
		height: 30%;
		background: #333d8b;
		background-image: url('../../static/yd.png');
		background-size: 100% 100%;
	}

	.title {
		font-size: 47rpx;
		color: #193566;
	}

	.welcome {
		width: 100%;
		display: block;
		padding-left: 60rpx;
		font-size: 70rpx;
		font-weight: 500;
		color: #193566;
		margin-top: 40rpx;
	}

	.please-login {
		margin-top: 5rpx;
		display: block;
		width: 100%;
		padding-left: 60rpx;
		font-size: 35rpx;
		font-weight: 400;
		color: #193566;
	}

	.inputs {
		margin-top: 48rpx;
		height: 110rpx;
		line-height: 110rpx;
		padding: 0 100rpx;
	}

	.inputs input {
		height: 110rpx;
		line-height: 110rpx;
		padding: 0rpx 0rpx 0rpx 70rpx;
		background: #F0F2FA;
		box-shadow: inset 5rpx 0rpx 11rpx 2rpx rgba(0, 0, 0, 0.16);
		border-radius: 65rpx 65rpx 65rpx 65rpx;
	}

	/deep/ .uni-input-wrapper {
		display: flex;
		flex: 1;
		width: auto;
		height: 130rpx;

	}

	/deep/ .uni-input-input {
		margin-left: 56rpx;
	}

	.input-placeholder {
		width: 100%;
		height: 100%;
		color: #A9B6C9;
		font-size: 33rpx;
		margin-left: 56rpx;
	}

	.button_login {
		margin-top: 61rpx;
		display: block;
		width: 390rpx;
		height: 115rpx;
		padding-left: 40rpx;
		font-size: 45rpx;
		background-color: #193566;
		color: #fff;
		box-shadow: 0px 5px 11px 2px rgba(0, 0, 0, 0.16);
		border-radius: 65px 65px 65px 65px;
		letter-spacing: 8rpx;
	}

	.wx-login {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 63rpx;
		color: #193566;
		opacity: 0.8;
	}

	.wx-login-text {
		font-size: 37rpx;
		color: #193566;
		text-decoration: underline;
		letter-spacing: 0rpx;
		font-weight: 400;
		/* opacity: 0.7; */
	}

	.bg-tree {
		position: absolute;
		bottom: 9%;
		left: 5%;
		/* background-image: url(../../static/bg-tree.svg); */
		/* background-position: 40% 50%; */
		width: 100%;
		height: 0;
		padding-top: 69%;
		background-repeat: no-repeat;
		background-size: 140% 140%;
	}
</style>